<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <style type="text/css">

.div{width: 50px;height: 200px;background: black;-transform:skew(30deg);
	-webkit-clip-path:polygon(50% 0,100% 100%,0% 100%);
	-transition:0.5s all ease;
	position: absolute;left: 50%;margin-left: -25px;bottom: 0;
}



    </style>
</head>
<body>
<div class='div' id='div1'></div>
<script type="text/javascript">
	
onmousemove = function(e){
	var ev = e || event;
	var needN = ev.clientX / innerWidth * 100;
	//console.log(  )
	div1.style.webkitClipPath = 'polygon('+needN+'% 0,100% 100%,0% 100%)'
}

</script>
</body>
</html>